<%@ page import="java.io.Writer" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录表单验证</title>
    <link rel="stylesheet" href="Res/CSS/Index.css">
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<h1><%= "欢迎登录！" %>
</h1>
<br/>
<div class="login">
    <img    id="imgs"
            src="${pageContext.request.contextPath}/Res/images/default_profile.png"
            alt="头像" title="头像">
  <form action="LoginServlet" method="post">
      <input type="text" id="Account" name="username" placeholder="账号"></br>
      <input type="password" id="pwd" name="password" placeholder="密码"></br>
      <input type="submit" value="登录">
  </form>
<%--    EL表达式 （推荐）--%>
    <p>${msg}</p>
    <p>${flag}</p>
    <p>${username}</p>

<%--   原有方式获取后台数据--%>
     <%
         HttpSession session1 = request.getSession();
         session1.getAttribute("username");
         Object msg = request.getAttribute("msg");
        if(msg != null)  {
            out.println("<p>"+msg+"</p>");
        }
    %>
</div>
</body>
<script>
    $(function (){
        //给Account元素添加丢失焦点触发的函数
        $("#Account").blur(function (){
            getUserProfilePicture($(this).val());
        });
    });

    function getUserProfilePicture(username){
        //调用ajax 异步请求
        $.ajax({
            url:"LoginServlet",   // 请求地址
            type:"get",           //  请求类型
            data:{"username":username},  // 数据
            success:function (data) {   // 回调函数，当响应成功时候返回data数据
                console.log(data);
                if (data != null) {
                    $("#imgs").attr("src","Res/images/item/"+data);
                }
            }
        });
    }

</script>
</html>